<template>
  <div class="app-container charts">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="70px" :rules="rules">
                          <el-form-item label="设备类型" prop="machineTypeId">
                            <el-select v-model="queryParams.machineTypeId" placeholder="请选择制造类型" style="width: 150px">
                                <el-option
                                        v-for="dict in machineTypeIdOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="日期基准" prop="endTime">
                            <WeekTimePicker type="date" v-model="queryParams.dataTime" style="width: 150px"/>
                        </el-form-item>

                        <el-form-item label="AST_10D">
                            <el-select v-model="queryParams.tenDayAstSort" style="width: 100px">
                                <el-option
                                        v-for="dict in tenDayAstSortOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                            <el-button style="margin-left: 10px;" type="primary" icon="Search" @click="getData">查询</el-button>
                          </el-form-item>
    </el-form>

    <div id="double" style="width: 100%; height: 450px;" v-show="isShow"></div>

    <!-- v-show="column" -->
    <t-ag-grid
      v-show="isShow"
      style="height: 195px;"
      :column-defs="column"
      :row-data="tableData"
      :row-buffer="20"
      align="center"
      :defaultColDef = "{
          suppressMenu:true
      }"
      header-align="center"
      />
  </div>
</template>

<script setup name="SingleDayAST">
  import { listHeatMapDay } from "@/api/indexAnalyse/singleDayAST"
  import { doubleCoordinateOptions } from './doubleCoordinate'
  import { getTableColumns } from "./table"
  const { proxy } = getCurrentInstance()
  import moment from 'moment'
  import * as echarts from 'echarts'

  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  const router = useRouter()

  const queryParams = reactive({
    machineTypeId: '叠瓦线',
    dataTime: moment().subtract(1, 'days').format('YYYY-MM-DD'),
    tenDayAstSort: '默认'
  })

  const machineTypeIdOptions = ref([
    { label: 'MBB线', value: 'MBB线' },
    { label: '叠瓦线', value: '叠瓦线' }
    // { label: 'ACF线', value: 'ACF线' }
  ])

  const tenDayAstSortOptions = [
    { label: '默认', value: 'default' },
    { label: '升序', value: 'asc' },
    { label: '降序', value: 'desc' }
  ]

  const rules = {
    machineTypeId: [
      { required: true, message: "制造类型不能为空", trigger: "change" }
    ]
  }

  const column = ref()
  const tableData = ref()

  const isShow = ref(false)

  let heatMapChart = null

  onActivated(() => {
    if(route.query.machineTypeId && route.query.dataTime){
      queryParams.machineTypeId = route.query.machineTypeId
      queryParams.dataTime = route.query.dataTime
      getData()
    }
  })

  onMounted(() => {
    heatMapChart = echarts.getInstanceByDom(document.getElementById("double"))

    const resizeObserver = new ResizeObserver((entries, b) => {
      if(heatMapChart){
        heatMapChart.resize()
      }
    })
    resizeObserver.observe(document.getElementById("double"))
    if (!heatMapChart) {
      heatMapChart = echarts.init(document.getElementById("double"))
    }

    heatMapChart.on('click', function(params) {
      if(params.componentType === 'xAxis') {
        router.push({
          path: '/indexAnalyse/astAnalysis/astTenDay',
          query: {
            machineTypeId: queryParams.machineTypeId,
            // mainLineName: `H05-${params.value}`,
            mainLineName: `H05-${params.value}`
          }
        })
      }
    })
  })

  const getData = () => {

    proxy.$refs.queryRef.validate(valid => { // 表单校验
      if (valid) {
        queryParams.dataTime = moment(queryParams.dataTime).format('YYYY-MM-DD')

        listHeatMapDay(queryParams).then((res) => {
          const { heatMapDayList, baseTT } = res.rows[0]
          if(heatMapDayList.length){ // 返回数据时显示
            isShow.value = true

            heatMapDayList.sort( (a, b) => {
              if(queryParams.tenDayAstSort=== 'asc'){
                return a.tenDayAst - b.tenDayAst
              } else if(queryParams.tenDayAstSort=== 'desc'){
                return b.tenDayAst - a.tenDayAst
              }
              return
            })

            const { doubleCoordinateOption } = doubleCoordinateOptions(heatMapDayList, queryParams.machineTypeId, moment(queryParams.dataTime).format('MM-DD'))
            heatMapChart.setOption(doubleCoordinateOption)

            const { columns,  target } = getTableColumns(heatMapDayList, queryParams.machineTypeId)
            column.value = columns
            tableData.value = target

            column.value.forEach((item) => {
              item.cellStyle = cellStyle
            })
          } else {
            isShow.value = false
          }

        })
      }
    })
  }

  const cellStyle = ({ data,  value }) => {
    if(data.MBB === '差异' && value > 0 ){
      return {
        color: 'red',
        fontWeight: 'bold'
      }
    }
  }

</script>

<style lang="less" scoped>
.charts {
  overflow-x: scroll;
}
</style>